<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useUserStore } from "@/stores/user";

defineOptions({
    name: "Menu121",
});

const input = ref("");

onMounted(() => {
    console.info("Menu1-2-1 component mounted");
});
</script>

<template>
    <el-card>
        <div class="mb-8">
            <h3 class="mb-3">
                功能测试 - 缓存路由测试
            </h3>
            <p class="mb-2">
                当前页面是否缓存：
                <el-tag v-if="$route.meta?.keepAlive" type="success" size="small" disable-transitions>
                    已缓存
                </el-tag>
                <el-tag v-else type="danger" size="small" disable-transitions>
                    未缓存
                </el-tag>
                （可以在系统管理-菜单管理中修改）
            </p>
            <el-input v-model="input" placeholder="请输入任意内容后切换页面后返回查看" />
        </div>

        <div class="mb-8">
            <h3 class="mb-3">
                功能测试 - 页面跳转测试
            </h3>
            <div class="mb-3">
                <p class="mb-2">
                    query传参
                </p>
                <el-button @click="$router.push({ name: 'UserTestDetail', query: { id: 1, name: '张三' } })">
                    查看用户详情（用户姓名: 张三）
                </el-button>
                <el-button @click="$router.push({ name: 'UserTestDetail', query: { id: 2, name: '李四' } })">
                    查看用户详情（用户姓名: 李四）
                </el-button>
                <el-button @click="$router.push({ name: 'UserTestDetail', query: { id: 3, name: '超超超超超超超超超超超超超超超长文本' } })">
                    查看用户详情（用户姓名: 超超超超超超超超超超超超超超超长文本）
                </el-button>
            </div>
            <div class="mb-3">
                <p class="mb-2">
                    param传参
                </p>
                <el-button @click="$router.push({ name: 'TaskTestDetail', query: { name: '任务1' }, params: { id: '10001' } })">
                    查看任务详情（任务id: 10001）
                </el-button>
                <el-button @click="$router.push({ name: 'TaskTestDetail', query: { name: '任务2' }, params: { id: '10002' } })">
                    查看任务详情（任务id: 10002）
                </el-button>
                <el-button @click="$router.push({ name: 'TaskTestDetail', query: { name: '任务3' }, params: { id: '10000000000000003' } })">
                    查看任务详情（任务id: 10000000000000003）
                </el-button>
            </div>
            <div>
                <p class="mb-2">
                    跳转不存在的路由
                </p>
                <el-button @click="$router.push('/test/unknown')">
                    点击跳转 /test/unknown
                </el-button>
            </div>
        </div>

        <div class="mb-8">
            <h3 class="mb-3">
                功能测试 - 权限控制
            </h3>
            <p class="mb-2">
                当前角色: {{ useUserStore().roles }}（可以在系统管理-角色管理中修改权限）
            </p>
            <el-button v-perm="'test::create'" type="primary">
                新增按钮
            </el-button>
            <el-button v-perm="'test::update'" type="warning">
                修改按钮
            </el-button>
            <el-button v-perm="'test::delete'" type="danger">
                删除按钮
            </el-button>
        </div>

        <div>
            <h3 class="mb-3">
                功能测试 - 页签测试
            </h3>
            <p class="mb-2">
                来吧, 试着把上面的页签撑满吧!&nbsp;&nbsp;(点击右上角齿轮可以打开页签持久化开关)
            </p>
        </div>
    </el-card>
</template>
